<template>
	<view class="cart-wrapper">
		<!-- 循环的购物车数据 -->
		<view class="goods-item" v-for="(item,key,index) in goods" :key="key">
			<!-- 左边的图标 -->
			<view class="goods-status" @click="cancelSelect(key)">
				<icon type="success" size="16" :color="item.selected ? 'red' : 'white'"></icon>
			</view>
			<!-- 图片 -->
			<navigator :url="`/pages/goods_detail/index?goods_id=${item.goods_id}`">
				<image :src="item.goods_small_logo" mode="aspectFill"></image>
			</navigator>
			<!-- 右边的商品信息 -->
			<view class="goods-info">
				<!-- 标题 -->
				<navigator :url="`/pages/goods_detail/index?goods_id=${item.goods_id}`" class="goods-title">
					{{item.goods_name}}
				</navigator>
				<!-- 价格和按钮列表 -->
				<view class="goods-info-bottom">
					<view class="goods-price">
						￥ {{item.goods_price}}
					</view>
					<view class="goods-action">
						<view class="calc" @click="handleCalc(-1,key)">
							-
						</view>
						<input :value="item.count" @input="changeCount($event,key)" type="number" />
						<view class="calc" @click="handleCalc(1,key)">
							+
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部的总计 -->
		<view class="footer">
			<view class="all-select" @click="handleSelectAll">
				<icon type="success" size="16" :color="!isAllSelected ? 'red' : 'white'"></icon>
				全选
			</view>
			<view class="all-price">
				合计：<text>￥{{totalMoney}}</text>
			</view>
			<button type="warn" @click="toOrder">去结算({{totalCount}})</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods: {}
			}
		},
		computed: {
			isAllSelected() {
				const keys = Object.keys(this.goods)
				return keys.some(key => this.goods[key].selected === false)
			},
			totalMoney(){
				let money = 0
				for(let key in this.goods){
					if(this.goods[key].selected){
						money += this.goods[key].goods_price * this.goods[key].count
					}
				}
				return money
			},
			totalCount(){
				let count = 0
				for(let key in this.goods){
					if(this.goods[key].selected){
						count += this.goods[key].count
					}
				}
				if(count > 99){
					return '99+'
				}else{
					return count
				}
			}
		},
		onShow() {
			this.goods = {}
			this.goods = uni.getStorageSync('goods')
		},
		onHide() {
			uni.setStorageSync('goods', this.goods)
		},
		methods: {
			toOrder(){
				uni.navigateTo({
					url:"../order/order"
				})
			},
			changeCount(e,key){
				let value = e.detail.value
				// if(value === '' || parseInt(value) === 0){
				// 	uni.showToast({
				// 		title: '至少输入1件商品',
				// 		icon: 'none',
				// 		duration: 2000
				// 	})
				// 	this.goods[key].count = 1
				// 	this.goods = {...this.goods}
				// 	return
				// }
				this.goods[key].count = +value
			},
			cancelSelect(key) {
				this.goods[key].selected = !this.goods[key].selected
			},
			handleSelectAll() {
				const isAll = this.isAllSelected
				Object.keys(this.goods).forEach(key => {
					this.goods[key].selected = isAll
				})
			},
			handleCalc(num, key) {
				this.goods[key].count += num
				if (this.goods[key].count < 1) {
					wx.showModal({
						title: '提示',
						content: '确定要删除改商品吗？',
						success: res => {
							if (res.confirm) {
								delete this.goods[key]
								this.goods = {...this.goods}
							} else if (res.cancel) {
								this.goods[key].count = 1
							}
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.goods-item {
		padding: 20rpx 30rpx;
		display: flex;
		height: 191rpx;
		align-items: center;
		border-bottom: 1px #eee solid;

		.goods-status {
			margin-right: 20rpx;

			icon {
				border: 1px solid #999;
				border-radius: 50%;
			}
		}

		image {
			width: 191rpx;
			height: 191rpx;
			display: block;
			margin-right: 30rpx;
			flex-shrink: 0;
		}

		.goods-info {
			display: flex;
			flex: 1;
			height: 100%;
			flex-direction: column;
			justify-content: space-between;


			.goods-title {
				font-size: 14px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}

			.goods-info-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.goods-price {
					color: red;
				}

				.goods-action {
					display: flex;
					align-items: center;
				}

				.calc {
					width: 16px;
					height: 16px;
					border-radius: 50%;
					font-size: 12px;
					border: 1px #333 solid;
					display: flex;
					justify-content: center;
					align-items: center;
					line-height: 1;
				}

				input {
					height: 18px;
					width: 80rpx;
					margin: 0 10rpx;
					font-size: 12px;
					text-align: center;
					background: #fff;
				}
			}
		}
	}

	.cart-wrapper {
		padding-bottom: 83rpx;

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 82rpx;
			border-top: 1px #eee solid;
			background: #fff;
			display: flex;
			align-items: center;
			font-size: 14px;
			box-sizing: border-box;
			padding: 0 30rpx;

			.all-select {
				display: flex;
				align-items: center;
				font-size: 12px;
				margin-right: 30rpx;

				icon {
					margin-right: 20rpx;
					border: 1px solid #999999;
					border-radius: 50%;
				}
			}

			.all-price {
				flex: 1;

				text {
					color: red
				}
			}

			button {
				width: 220rpx;
				height: 52rpx;
				line-height: 53rpx;
				font-size: 12px;
				border-radius: 50px;
			}
		}
	}
</style>
